<script setup lang="ts">
  import NodeSet from './node-set/index.vue'
  import TemplateSet from './template-set/index.vue'
  import { ref } from 'vue'

  defineOptions({
    name: 'CheckFlow',
  })

  const activeTabName = ref('nodeSet')
  const nodeSetInstance = ref<InstanceType<typeof NodeSet> | null>(null)
  const templateSetInstance = ref<InstanceType<typeof TemplateSet> | null>(null)

  const getList = () => {
    if (activeTabName.value === 'nodeSet' && nodeSetInstance.value) {
      nodeSetInstance.value.getList()
    }

    if (activeTabName.value === 'templateSet' && templateSetInstance.value) {
      templateSetInstance.value.getList()
    }
  }

  defineExpose({
    getList,
  })
</script>

<template>
  <div class="check-flow-component">
    <el-tabs v-model="activeTabName" @tab-change="getList">
      <el-tab-pane label="节点设置" name="nodeSet">
        <node-set ref="nodeSetInstance" />
      </el-tab-pane>
      <el-tab-pane label="模板设置" name="templateSet">
        <template-set ref="templateSetInstance" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<style scoped lang="scss">
  .check-flow-component {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 0 12px 12px 12px;

    :deep(.el-tabs) {
      width: 100%;
      height: 100%;

      .el-tabs__content {
        flex: 1;
        height: 0;

        .el-tab-pane {
          height: 100%;
        }
      }
    }
  }
</style>
